<template>
  <div>
    <el-row class="tac">
      <el-col>
        <el-menu
          router
          default-active="$route.path"
          :unique-opened="true"
          class="el-menu-vertical-demo"
          text-color="#909399"
          active-text-color="#409EFF"
          style="font-weight:500;"
        >
          <el-menu-item index="/area" align="left">
            <i class="icon fa fa-plus-square" style="display:inline-block; padding-right:10px"></i>
            <span slot="title">举办赛区列表</span>
          </el-menu-item>
          <el-menu-item index="/school" align="left">
            <i class="icon fa fa-university" style="display:inline-block; padding-right:10px"></i>
            <span slot="title">主办校区列表</span>
          </el-menu-item>
          <el-menu-item index="/user" align="left">
            <i class="icon fa fa-user" style="display:inline-block; padding-right:10px"></i>
            <span slot="title">校区管理员</span>
          </el-menu-item>
          <el-menu-item index="/add" align="left">
            <i class="icon fa fa-plus-square" style="display:inline-block; padding-right:10px"></i>
            <span slot="title">赛事列表</span>
          </el-menu-item>
        </el-menu>

        <el-menu
          router
          default-active="$route.path"
          :unique-opened="true"
          class="el-menu-vertical-demo"
          text-color="#909399"
          active-text-color="#409EFF"
          style="font-weight:500;"
          @open="handleOpen"
        >
          <el-submenu index="season" align="left">

            <template slot="title">
              <i class="icon fa el-icon-menu" style="display:inline-block; padding-right:10px"></i>
              <span>赛季详情</span>
            </template>

            <el-submenu
              align="left"
              :index="JSON.stringify(season)"
              v-for="season in seasonInfo"
              :key="season.id"
            >
              <template slot="title">
                <i class="el-icon-document"></i>
                <span>{{season.competition_name}}</span>
              </template>
<<<<<<< HEAD

=======
>>>>>>> zq
              <el-menu-item index="/import" align="left">
                <i class="icon fa fa-list" style="display:inline-block; padding-right:10px"></i>
                <span slot="title">批量导入</span>
              </el-menu-item>

              <el-menu-item index="/unpay" align="left">
                <i class="icon fa fa-minus-square" style="display:inline-block; padding-right:10px"></i>
                <span slot="title">未交费</span>
              </el-menu-item>

              <el-menu-item index="/fpay" align="left">
                <i class="icon fa fa-plus-square" style="display:inline-block; padding-right:10px"></i>
                <span slot="title">已交费</span>
              </el-menu-item>

              <el-menu-item index="/team" align="left">
                <i class="icon fa fa-fa" style="display:inline-block; padding-right:10px"></i>
                <span slot="title">参赛组队</span>
              </el-menu-item>
<<<<<<< HEAD

            </el-submenu>

          </el-submenu>

=======
            </el-submenu>
          </el-submenu>
>>>>>>> zq
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>


<script>
// 从vuex里面引入 mapMutations 方法
import { mapMutations } from "vuex";
import { constants } from "crypto";
export default {
  name: "sideleft",
  data() {
    return {
      seasonInfo: [], // 赛季信息列表
      a: 1
    };
  },
  // 方法
  mounted: function() {
    this.getSeasondata(); // 获取赛季信息
  },
  methods: {
    // 获取有效赛季信息
    getSeasondata() {
      let that = this;
      that.$api
        .getCompetitionInfo()
        .then(res => {
          // console.log(res.data.results)
          that.seasonInfo = res.data.results;
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleOpen(key, keyPath) {
      if (key === "season") {
        this.getSeasondata();
      } else {
        let season = JSON.parse(key);
        let that = this;
        let seasonInfo = {
          seasonName: season.competition_name,
          seasonId: season.id,
          seasonDate: season.holding_time
        };
        // console.log(seasonInfo)
        that.setSeasoInfo(seasonInfo);
      }
    },
    // clickSeason(key) {
    //   // console.log(key);
    //   let season = key;
    //   let that = this;
    //   let seasonInfo = {
    //     seasonName: season.competition_name,
    //     seasonId: season.id,
    //     seasonDate: season.holding_time
    //   };
    //   // console.log(seasonInfo)
    //   that.setSeasoInfo(seasonInfo);
    // },

    ...mapMutations(["setSeasoInfo"])
  }
};
</script>


<style scoped>
.el-menu {
  border: none;
}

.el-menu-item:focus,
.el-menu-item:hover {
  background-color: #ecf5ff !important;
}

.el-submenu__title:hover {
  background-color: #ecf5ff !important;
}
</style>